import React, { Component } from "react";

class App extends Component {

  //构造器
  constructor(props) {
    super(props);
  }

  // 挂载前
  componentWillMount() {}

  // 渲染时
  render() {
    return <div>生命周期（组件从创建到销毁的一个规程）</div>;
  }

  // 挂载后: 初始化数据请求
  componentDidMount() {}

  // ======================更新阶段====================
  // 监听props变化，可以接收到最新的props，打印this.porps 是旧值
  componentWillReceiveProps(newProps) {}

  // 做优化， 返回一个boolean值，如果返回true继续执行生命周期，如果返回false 停止执行生命周期,接收两个参数，最新的porps和最新的state，打印this.props和this.state是旧值
  shouldComponentUpdate(newProps, newState) {}

  // 数据更新前
  componentWillUpdate(newProps, newState) {}

  // 更新时，通过diff算法，生成一颗新的虚拟dom树，与旧树做比较，找到最小的饿差异，经行局部更新
  // render() {}

  // 数据更新后, 接收两个参数，旧的props和旧的state，打印this.props和this.state是新值
  componentDidUpdate(oldProps, oldState) {}

  // 捕获页面异常，页面中的报错回统一处理, err 页面中的错误信息
  componentDidCatch(err) {
    console.log(err)
  }

  // ================= 销毁阶段 ====================
  // 销毁定时器，延时器，事件监听器，销毁实例，属性以及方法
  componentWillUnmount() {}

  // ==================== 18版本新的生命周期 ===========================
  // 旧的生命周期中，只能监听props的变化，不能保证state数据开源的唯一性，新的生命周期可以监听props和state的变化，并且需要有返回值，返回false 不更改state中的值，返回一个对象，回更改state中的值
  static getDerivedStateFromProps(newProps, newState) {
    return {
      a: 2
    }
  }

  // 再react开启异步渲染之后，旧的生命周期不能保证render阶段读取到的dom元素状态和commit的状态一致，这就导致，再componentDidUpdate中使用componentWildate中的dom元素状态不安全
  // 新的生命周期，是在即将触发render前经行调用，并且有返回值，返回值回作用到componentDidUpDate的第三个参数中，确保更新前后的值一致；
  // 一般作用与聊天室等功能
  getSnapshotBeforeUpdate(oldProps, oldState) {
    return null
  }
}

export default App;
